<script setup lang="tsx">
import { ref } from 'vue'
import { deleteTalentApi, getTalentListApi } from '@/api/talent'
import type { TalentItemType } from '@/types/api/talent'
import SearchForm from '@/components/SearchForm/index.vue'
import {
  NForm,
  NFormItem,
  NInput,
  NButton,
  NSpace,
  NDataTable,
  NPopover,
  useMessage
} from 'naive-ui'
import TableDeletePopconfirm from '@/components/TableDeletePopconfirm/index.vue'
import type { DataTableColumns } from 'naive-ui'
import { CopyOutline, EyeOutline } from '@vicons/ionicons5'
import Icon from '@/components/Icon/index.vue'
import SaveModal from './SaveModal/index.vue'
import { SECTOR_DICT, TALENT_DIR } from '@/constants/biz'
import { OSSUtil } from '@/utils/alioss'
import { copyText } from '@/utils/common'
import SectorSelect from '@/components/SectorSelect/index.vue'

const message = useMessage()

// 获取STSToken需要时间，先提前初始化一下
OSSUtil.init('chenmingxu')

// 分页
const pagination = ref({
  pageNumber: 1,
  pageSize: 10,
  total: 0
})

// 表单值
const formValue = ref({
  name: '',
  company: '',
  sector: '',
  jobTitle: ''
})

// 获取人才列表
const talentList = ref<TalentItemType[]>([])
const getTalentList = async () => {
  const payload = {
    ...pagination.value,
    ...formValue.value
  }
  const result = await getTalentListApi(payload)
  talentList.value = result.content.list
  pagination.value.total = result.content.total
}
getTalentList()

// 查询
const handleSearch = () => {
  pagination.value.pageNumber = 1
  getTalentList()
}

const saveModalRef = ref<InstanceType<typeof SaveModal> | null>(null)
const openSaveModal = () => {
  saveModalRef.value && (saveModalRef.value.showModal = true)
}
const currentRecord = ref<TalentItemType | null>(null)

// 创建
const saveType = ref<'create' | 'update'>('create')
const handleCreateTalent = () => {
  saveType.value = 'create'
  currentRecord.value = null
  openSaveModal()
}

// 更新
const handleUpdateTalent = (rowData: TalentItemType) => {
  saveType.value = 'update'
  currentRecord.value = rowData
  openSaveModal()
}

// 删除
const handleDeleteTalent = async (rowData: TalentItemType) => {
  const payload = { id: rowData.id }
  await deleteTalentApi(payload)
  message.success('删除成功')
  handleSearch()
}

// 表头
const columns: DataTableColumns<TalentItemType> = [
  {
    title: '姓名',
    key: 'name'
  },
  {
    title: '手机号',
    key: 'phoneNumber'
  },
  {
    title: '公司信息',
    key: 'company'
  },
  {
    title: '行业类型',
    key: 'sector',
    render: (rowData) => {
      return SECTOR_DICT[rowData.sector] || '-'
    }
  },
  {
    title: '岗位名称',
    key: 'jobTitle'
  },
  {
    title: '简历地址',
    key: 'url',
    render: (rowData) => {
      const { fileName } = rowData
      return (
        <NSpace>
          <NButton type="info" text onClick={() => handlePreview(rowData)}>
            {fileName.replace(TALENT_DIR + '/', '')}
          </NButton>
        </NSpace>
      )
    }
  },
  // {
  //   title: '文件指纹',
  //   key: 'etag',
  //   render: (rowData) => {
  //     const { etag } = rowData
  //     const slots = {
  //       trigger: () => (
  //         <NButton text onClick={() => copyText(rowData.etag)}>
  //           <Icon component={CopyOutline} class="icon" />
  //         </NButton>
  //       )
  //     }
  //     return (
  //       <NSpace class="etag-wrapper">
  //         <span>{etag}</span>
  //         <NPopover trigger="hover" v-slots={slots}>
  //           <span>复制</span>
  //         </NPopover>
  //       </NSpace>
  //     )
  //   }
  // },
  {
    title: '创建时间',
    key: 'createdAt'
  },
  {
    title: '操作',
    key: '',
    render: (rowData) => {
      return (
        <div>
          <NSpace>
            <NButton text type="info" onClick={() => handleUpdateTalent(rowData)}>
              编辑
            </NButton>
            <TableDeletePopconfirm onOk={() => handleDeleteTalent(rowData)} />
          </NSpace>
        </div>
      )
    }
  }
]

// 预览
const handlePreview = (record: TalentItemType) => {
  const { fileName } = record
  const previewUrl = OSSUtil.signatureUrl(fileName)
  window.open(previewUrl, '_blank')
}
</script>

<template>
  <div class="talent-container">
    <!-- 搜索 -->
    <SearchForm>
      <div class="flex justify-content-between flex-1">
        <NForm
          :model="formValue"
          inline
          label-placement="left"
          label-align="left"
          :show-feedback="false"
          @keydown.enter="handleSearch"
        >
          <NFormItem label="姓名">
            <NInput v-model:value="formValue.name" placeholder="请输入姓名" :clearable="true" />
          </NFormItem>
          <NFormItem label="公司信息">
            <NInput
              v-model:value="formValue.company"
              placeholder="请输入公司信息"
              :clearable="true"
            />
          </NFormItem>
          <NFormItem label="岗位名称">
            <NInput
              v-model:value="formValue.jobTitle"
              placeholder="请输入岗位名称"
              :clearable="true"
            />
          </NFormItem>
          <NFormItem label="行业类型">
            <SectorSelect v-model:value="formValue.sector" />
          </NFormItem>
          <NFormItem>
            <NButton attr-type="button" type="primary" @click="handleSearch"> 查询 </NButton>
          </NFormItem>
        </NForm>
        <NButton type="primary" @click="handleCreateTalent">创建简历</NButton>
      </div>
    </SearchForm>
    <!-- 表格 -->
    <div class="table-container box">
      <NDataTable
        :columns="columns"
        :data="talentList"
        :pagination="{
          pageSize: pagination.pageSize
        }"
        :striped="true"
      ></NDataTable>
    </div>
    <!-- 新增|编辑弹窗 -->
    <SaveModal ref="saveModalRef" :type="saveType" :record="currentRecord" :onOk="handleSearch" />
  </div>
</template>

<style lang="scss" scoped>
.talent-container {
  :deep(.etag-wrapper) {
    .icon {
      visibility: hidden;
      margin-top: 4px;
    }
    &:hover {
      .icon {
        visibility: visible;
      }
    }
  }
}
</style>
